<!--
 * @Description: 支付入网页面（多端使用）
 * @Author: Kerwin
 * @Date: 2024-02-26 13:52:41
 * @LastEditTime: 2025-10-29 15:07:06
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-shadow -->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-use-before-define -->

<template>
  <view class="container">
    <!-- #ifdef H5 -->
    <hy-nav-bar :title="'支付入网'" v-if="!isApp"></hy-nav-bar>
    <!-- #endif -->
    <c_previewSubsection
      v-if="isPreview"
      :isPreview="isPreview"
      paymentChannel="lkl"
      :shopId="shopId"
    />
    <view class="sft_rw" v-if="!isPreview" @click="toSft"
      >需要入网盛付通？点这里>></view
    >
    <u-alert-tips
      type="warning"
      title=""
      v-if="tips"
      :show-icon="true"
      :description="tips"
      style="margin: 20rpx 30rpx"
    ></u-alert-tips>

    <u-form :model="formData" ref="form">
      <!-- 营业执照 -->
      <view class="section" v-if="formData.sft_merchantType != 2">
        <u-form-item
          required
          label="营业执照信用代码"
          label-width="auto"
          prop="sft_licenseNo"
          :border-bottom="true"
          ><u-input
            v-model="formData.sft_licenseNo"
            @blur="inputBlur($event, 'sft_licenseNo')"
            input-align="right"
            placeholder="营业执照信用代码"
            :show-confirmbar="false"
        /></u-form-item>
        <u-form-item
          required
          label="营业执照有效期"
          label-width="auto"
          prop="sft_licenseExpiryDate"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_licenseExpiryDate"
            type="select"
            @click="calendars[0].show = true"
            input-align="right"
          />
          <u-calendar
            v-model="calendars[0].show"
            mode="range"
            :min-date="calendars[0].minDate"
            :max-date="calendars[0].maxDate"
            @change="calendars[0].callback"
          ></u-calendar>
          <text class="cq" @click="handleBigRange(calendars[0])">长期</text>
        </u-form-item>
      </view>
      <!-- 企业法人/个体商户法人/小微商户老板身份信息 -->
      <view class="section">
        <u-form-item
          required
          :label="formData.sft_merchantType == 2 ? '银行卡本人' : '法人'"
          label-width="auto"
          prop="sft_corporationName"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_corporationName"
            @blur="inputBlur($event, 'sft_corporationName')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="身份证号"
          label-width="auto"
          prop="sft_corporationIdcardNo"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_corporationIdcardNo"
            @blur="inputBlur($event, 'sft_corporationIdcardNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>

        <view>
          <u-form-item
            required
            label="身份证正反面照片"
            label-width="auto"
            :border-bottom="false"
          ></u-form-item>
          <view class="tips">支持.jpg .jpeg .png格式照片，大小不超过10M</view>
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop="sft_corporationIdcardFrontImage"
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                :showUploadList="true"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporationIdcardFrontImage"
                :file-list="
                  formData.sft_corporationIdcardFrontImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporationIdcardFrontImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">正面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <u-form-item
              label=""
              label-width="auto"
              prop="sft_corporationIdcardBackImage"
              :border-bottom="false"
            >
              <custom-upload
                ref="upload2"
                name="object"
                :action="uploadUrl"
                max-count="1"
                :custom-btn="true"
                :deletable="!isPreview"
                :header="header"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                index="sft_corporationIdcardBackImage"
                :file-list="
                  formData.sft_corporationIdcardBackImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporationIdcardBackImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">反面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
          </view>
        </view>
        <u-form-item
          v-if="formData.sft_merchantType == 2"
          required
          label="手持证件照"
          label-width="auto"
          prop="sft_corporationIdcardWithHandImage"
          :border-bottom="false"
          label-position="top"
        >
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop="sft_corporationIdcardWithHandImage"
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporationIdcardWithHandImage"
                :file-list="
                  formData.sft_corporationIdcardWithHandImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporationIdcardWithHandImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">手持证件照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <view class="tips">
              支持.jpg .jpeg .png格式照片，大小不超过10M
            </view>
          </view>
        </u-form-item>
        <!-- <u-form-item required :label="formData.sft_merchantType == 2 ? '银行卡本人身份证有效期' : '法人身份证有效期'" label-width="auto"
          prop="sft_corporationIdcardExpiryDate" :border-bottom="false">
          <u-input v-model="formData.sft_corporationIdcardExpiryDate" type="select" @click="calendars[1].show = true"
            input-align="right" />
          <u-calendar v-model="calendars[1].show" mode="range" :min-date="calendars[1].minDate"
            :max-date="calendars[1].maxDate" @change="calendars[1].callback"></u-calendar>
          <text class="cq" @click="handleBigRange(calendars[1])">长期</text>
        </u-form-item> -->
      </view>
      <!--其他个人储蓄账户持卡人身份信息： 小微商户不显示，其他商户选择其他个人储蓄账户时显示  -->
      <view
        class="section"
        v-if="
          formData.sft_accountTypeValue == '2' && formData.sft_merchantType != 2
        "
      >
        <u-form-item
          required
          label="账户类型"
          label-width="auto"
          prop="sft_accountType"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_accountType"
            type="select"
            input-align="right"
            @click="selectors[0].show = true"
        /></u-form-item>
        <u-select
          v-model="selectors[0].show"
          :list="selectors[0].options"
          @confirm="selectors[0].callback"
        ></u-select>

        <u-form-item
          required
          label="持卡人"
          label-width="auto"
          prop="sft_otherPersonName"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_otherPersonName"
            @blur="inputBlur($event, 'sft_otherPersonName')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="持卡人身份证号"
          label-width="auto"
          prop="sft_otherPersonIdcardNo"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_otherPersonIdcardNo"
            @blur="inputBlur($event, 'sft_otherPersonIdcardNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="持卡人身份证正反面照片"
          label-width="auto"
          prop=""
          :border-bottom="false"
          label-position="top"
        >
        </u-form-item>
        <view class="tips"> 支持.jpg .jpeg .png格式照片，大小不超过10M </view>
        <view class="uploadBox" flex>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_otherPersonIdcardFrontImage"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              name="object"
              :action="uploadUrl"
              :header="header"
              max-count="1"
              :multiple="false"
              :custom-btn="true"
              @on-success="uploadSuccess"
              @on-remove="removeObject"
              :deletable="!isPreview"
              index="sft_otherPersonIdcardFrontImage"
              :file-list="
                formData.sft_otherPersonIdcardFrontImage
                  ? [
                      {
                        url: getImgFullPath(
                          formData.sft_otherPersonIdcardFrontImage
                        )
                      }
                    ]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">正面照</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_otherPersonIdcardBackImage"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              name="object"
              :action="uploadUrl"
              :header="header"
              max-count="1"
              :multiple="false"
              :custom-btn="true"
              @on-success="uploadSuccess"
              @on-remove="removeObject"
              :deletable="!isPreview"
              index="sft_otherPersonIdcardBackImage"
              :file-list="
                formData.sft_otherPersonIdcardBackImage
                  ? [
                      {
                        url: getImgFullPath(
                          formData.sft_otherPersonIdcardBackImage
                        )
                      }
                    ]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">背面照</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>
        <!-- <u-form-item required label="证件有效期" label-width="auto" prop="sft_otherPersonIdcardExpiryDate"
          :border-bottom="false">
          <u-input v-model="formData.sft_otherPersonIdcardExpiryDate" type="select" @click="calendars[2].show = true"
            input-align="right" />
          <u-calendar v-model="calendars[2].show" mode="range" :min-date="calendars[2].minDate"
            :max-date="calendars[2].maxDate" @change="calendars[2].callback"></u-calendar>
          <text class="cq" @click="handleBigRange(calendars[2])">长期</text>
        </u-form-item> -->
      </view>
      <!--法人个人储蓄账户信息： 小微商户直接显示，其他商户选择法人个人储蓄账户时显示  -->
      <view
        class="section"
        v-if="formData.sft_accountTypeValue == '1' || current == 2"
      >
        <!--小微不显示账户类型切换项 -->
        <u-form-item
          v-if="formData.sft_merchantType != 2"
          required
          label="账户类型"
          label-width="auto"
          prop="sft_accountType"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_accountType"
            type="select"
            input-align="right"
            @click="selectors[0].show = true"
        /></u-form-item>
        <u-select
          v-model="selectors[0].show"
          :list="selectors[0].options"
          @confirm="selectors[0].callback"
        ></u-select>
        <u-form-item
          v-if="false"
          required
          label="账户名称"
          label-width="auto"
          prop="sft_corporatePersonalAccountName"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_corporatePersonalAccountName"
            @blur="inputBlur($event, 'sft_corporatePersonalAccountName')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="银行卡照片(有银行卡号的那一面)"
          label-width="auto"
          prop="sft_corporatePersonalAccountFrontImage"
          :border-bottom="false"
          label-position="top"
        >
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop=""
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporatePersonalAccountFrontImage"
                :file-list="
                  formData.sft_corporatePersonalAccountFrontImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporatePersonalAccountFrontImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡正面照</view>
                  </view>
                </template>
              </custom-upload>
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporatePersonalAccountBackImage"
                :file-list="
                  formData.sft_corporatePersonalAccountBackImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporatePersonalAccountBackImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡背面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <view class="tips">
              支持.jpg .jpeg .png格式照片，大小不超过10M
            </view>
          </view>
        </u-form-item>
        <u-form-item
          required
          label="银行账号"
          label-width="auto"
          prop="sft_corporatePersonalAccountNo"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_corporatePersonalAccountNo"
            @blur="inputBlur($event, 'sft_corporatePersonalAccountNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="开户银行"
          label-width="auto"
          prop="sft_corporatePersonalAccountBankBranch"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_corporatePersonalAccountBankBranch"
            @blur="inputBlur($event, 'sft_corporatePersonalAccountBankBranch')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
      </view>
      <!--其他个人储蓄账户信息： 小微商户不显示，其他商户选择其他个人储蓄账户时显示  -->
      <view
        class="section"
        v-if="
          formData.sft_accountTypeValue == '2' && formData.sft_merchantType != 2
        "
      >
        <u-form-item
          required
          label="银行卡照片(有银行卡号的那一面)"
          label-width="auto"
          prop="sft_otherPersonAccountImage"
          :border-bottom="false"
          label-position="top"
        >
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop=""
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_otherPersonAccountImage"
                :file-list="
                  formData.sft_otherPersonAccountImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_otherPersonAccountImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡正面照</view>
                  </view>
                </template>
              </custom-upload>
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_otherPersonAccountBackImage"
                :file-list="
                  formData.sft_otherPersonAccountBackImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_otherPersonAccountBackImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡背面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <view class="tips">
              支持.jpg .jpeg .png格式照片，大小不超过10M
            </view>
          </view>
        </u-form-item>
        <u-form-item
          required
          label="银行账号"
          label-width="auto"
          prop="sft_otherPersonAccountNo"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_otherPersonAccountNo"
            @blur="inputBlur($event, 'sft_otherPersonAccountNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
      </view>

      <!--对公账户： 企业商户直接显示，个体商户选择法人个人储蓄账户时不显示，小微商户不显示  -->
      <view
        class="section"
        v-if="
          formData.sft_merchantType == 1 ||
          (formData.sft_accountTypeValue != '1' &&
            formData.sft_merchantType == 0)
        "
      >
        <template
          v-if="formData.sft_accountTypeValue == selectors[0].options[0].value"
        >
          <u-form-item
            required
            label="账户类型"
            label-width="auto"
            prop="sft_accountType"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_accountType"
              type="select"
              input-align="right"
              @click="selectors[0].show = true"
          /></u-form-item>
          <u-select
            v-model="selectors[0].show"
            :list="selectors[0].options"
            @confirm="selectors[0].callback"
          ></u-select>
        </template>
        <template v-else>
          <view class="title">同名银行账户信息</view>
          <!-- 非个体工商户其他个人账户显示 -->
          <u-form-item
            v-if="
              formData.sft_accountTypeValue != selectors[0].options[2].value
            "
            required
            label="账户类型"
            label-width="auto"
            prop="sft_accountType"
            :border-bottom="true"
          >
            <u-input
              v-model="selectors[0].options[0].label"
              type=""
              disabled
              input-align="right"
          /></u-form-item>
        </template>
        <!-- 新增 账户类型2 个体工商户选其他个人账户显示 -->
        <template
          v-if="
            formData.sft_accountTypeValue == selectors[0].options[2].value &&
            formData.sft_merchantType == 0
          "
        >
          <u-form-item
            required
            label="账户类型"
            label-width="auto"
            prop="sft_accountType2"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_accountType2"
              type="select"
              input-align="right"
              @click="selectors[1].show = true"
          /></u-form-item>
          <u-select
            v-model="selectors[1].show"
            :list="selectors[1].options"
            @confirm="selectors[1].callback"
          ></u-select>
        </template>
        <view
          v-if="
            formData.sft_accountTypeValue == '2' &&
            formData.sft_merchantType == 0
          "
          style="color: red"
        >
          个体工商选择非法人结算时，需要提供对公账户或法人个人储蓄账户验证。</view
        >
        <!-- 企业商户显示 || 个体工商户+账户类型2为法人个人储蓄账户时显示 -->
        <template
          v-if="
            formData.sft_merchantType == 1 ||
            (formData.sft_accountType2Value == selectors[1].options[0].value &&
              formData.sft_merchantType == 0)
          "
        >
          <u-form-item
            required
            label="公司名称"
            label-width="auto"
            prop="sft_accountName"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_accountName"
              @blur="inputBlur($event, 'sft_accountName')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="银行账号"
            label-width="auto"
            prop="sft_bankcardNo"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_bankcardNo"
              @blur="inputBlur($event, 'sft_bankcardNo')"
              input-align="right"
              placeholder="请输入 "
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            v-if="formData.sft_bankcardNo"
            required
            label="确认银行账号"
            label-width="auto"
            prop="sft_bankcardNoRepeat"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_bankcardNoRepeat"
              @blur="inputBlur($event, 'sft_bankcardNoRepeat')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="开户银行"
            label-width="auto"
            prop="sft_bankBranch"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_bankBranch"
              @blur="inputBlur($event, 'sft_bankBranch')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="开户证明"
            label-width="auto"
            prop="sft_accountOpeningCertificate"
            :border-bottom="false"
            label-position="top"
          >
            <view class="uploadBox" flex>
              <u-form-item
                label=""
                label-width="auto"
                prop=""
                :border-bottom="false"
              >
                <custom-upload
                  ref="upload1"
                  name="object"
                  :action="uploadUrl"
                  :header="header"
                  max-count="1"
                  :multiple="false"
                  :custom-btn="true"
                  @on-success="uploadSuccess"
                  @on-remove="removeObject"
                  :deletable="!isPreview"
                  index="sft_accountOpeningCertificate"
                  :file-list="
                    formData.sft_accountOpeningCertificate
                      ? [
                          {
                            url: getImgFullPath(
                              formData.sft_accountOpeningCertificate
                            )
                          }
                        ]
                      : []
                  "
                >
                  <template v-slot:addBtn>
                    <view
                      class="slot-btn"
                      hover-class="slot-btn__hover"
                      hover-stay-time="150"
                    >
                      <u-icon name="plus" size="80" color="#fff"></u-icon>
                      <view class="des">开户证明</view>
                    </view>
                  </template>
                </custom-upload>
              </u-form-item>
              <view class="tips">
                开户证明可以任选以下一种即可: <br />
                1、开户许可证<br />
                2、网银截图<br />
                3、银行回执单<br />
                4、银行打印结算账户(盖章)<br />
                5、基本存款账户信息单<br />
                6、汇款凭证。<br />
              </view>
            </view>
          </u-form-item>
        </template>
        <!-- 个体工商户+账户类型2为法人个人储蓄账户时显示 -->
        <template
          v-if="
            formData.sft_accountType2Value == selectors[1].options[1].value &&
            formData.sft_merchantType == 0
          "
        >
          <u-form-item
            required
            label="法人姓名"
            label-width="auto"
            prop="sft_corporationName"
            :border-bottom="false"
          >
            <u-input
              v-model="formData.sft_corporationName"
              @blur="inputBlur($event, 'sft_corporationName')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="银行卡照片(有银行卡号的那一面)"
            label-width="auto"
            prop="sft_corporatePersonalAccountFrontImage"
            :border-bottom="false"
            label-position="top"
          >
            <view class="uploadBox" flex>
              <u-form-item
                label=""
                label-width="auto"
                prop=""
                :border-bottom="false"
              >
                <custom-upload
                  ref="upload1"
                  name="object"
                  :action="uploadUrl"
                  :header="header"
                  max-count="1"
                  :multiple="false"
                  :custom-btn="true"
                  @on-success="uploadSuccess"
                  @on-remove="removeObject"
                  :deletable="!isPreview"
                  index="sft_corporatePersonalAccountFrontImage"
                  :file-list="
                    formData.sft_corporatePersonalAccountFrontImage
                      ? [
                          {
                            url: getImgFullPath(
                              formData.sft_corporatePersonalAccountFrontImage
                            )
                          }
                        ]
                      : []
                  "
                >
                  <template v-slot:addBtn>
                    <view
                      class="slot-btn"
                      hover-class="slot-btn__hover"
                      hover-stay-time="150"
                    >
                      <u-icon name="plus" size="80" color="#fff"></u-icon>
                      <view class="des">银行卡正面照</view>
                    </view>
                  </template>
                </custom-upload>
                <custom-upload
                  ref="upload1"
                  name="object"
                  :action="uploadUrl"
                  :header="header"
                  max-count="1"
                  :multiple="false"
                  :custom-btn="true"
                  @on-success="uploadSuccess"
                  @on-remove="removeObject"
                  :deletable="!isPreview"
                  index="sft_corporatePersonalAccountBackImage"
                  :file-list="
                    formData.sft_corporatePersonalAccountBackImage
                      ? [
                          {
                            url: getImgFullPath(
                              formData.sft_corporatePersonalAccountBackImage
                            )
                          }
                        ]
                      : []
                  "
                >
                  <template v-slot:addBtn>
                    <view
                      class="slot-btn"
                      hover-class="slot-btn__hover"
                      hover-stay-time="150"
                    >
                      <u-icon name="plus" size="80" color="#fff"></u-icon>
                      <view class="des">银行卡背面照</view>
                    </view>
                  </template>
                </custom-upload>
              </u-form-item>
              <view class="tips">
                支持.jpg .jpeg .png格式照片，大小不超过10M
              </view>
            </view>
          </u-form-item>
          <u-form-item
            required
            label="法人银行账号"
            label-width="auto"
            prop="sft_corporatePersonalAccountNo"
            :border-bottom="false"
          >
            <u-input
              v-model="formData.sft_corporatePersonalAccountNo"
              @blur="inputBlur($event, 'sft_corporatePersonalAccountNo')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="开户银行"
            label-width="auto"
            prop="sft_corporatePersonalAccountBankBranch"
            :border-bottom="false"
          >
            <u-input
              v-model="formData.sft_corporatePersonalAccountBankBranch"
              @blur="
                inputBlur($event, 'sft_corporatePersonalAccountBankBranch')
              "
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
        </template>
      </view>
      <!-- 提交审核 -->
      <view class="section">
        <view>
          提示：所有资料提交后
          ，随时留意门店后台状态，如出现审核被拒，请根据要求重新填写提交；
        </view>
        <u-checkbox-group>
          <u-checkbox v-model="agree">
            <text>同意资料申报由黑银工作人员办理</text>
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <u-button
        type="primary"
        style="margin: 0 30rpx"
        @click="submit"
        v-if="!isPreview"
        >提交审核</u-button
      >
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </u-form>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import { onLoad, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, powerBankApi, userApi, productApi } from '@/api'
import { checkLoginState, dateFormat, getImgFullPath } from '@/utils/index'
import { useUserStore } from '@/store'
import customUpload from '../../components/custom-upload/custom-upload.vue'
import { browserVersion, getCookie } from '@/utils/common'
import c_channelSelector from './c_channelSelector.vue'
import c_previewSubsection from './c_previewSubsection.vue'
import { route } from '../../../utils/common'

const userStore = useUserStore()
const { userInfo, hasLogin } = storeToRefs(userStore)
const loading = ref(false)
const check = ref(false)
function handleBigRange(calendar: any) {
  const { name, callback } = calendar
  const data = {
    startDate: `${dateFormat(new Date(), 'yyyy-MM-dd')}`,
    endDate: `${new Date().getFullYear() + 60}-01-01`
  }
  callback(data)
}
const selectors = ref([
  {
    name: 'sft_accountType',
    show: false,
    options: [
      {
        label: '对公账户',
        value: 0
      },
      {
        label: '法人个人储蓄账户',
        value: 1
      },
      {
        label: '其他个人储蓄账户',
        value: 2
      }
    ],
    value: '',
    callback: (e: any) => {
      const data = e[0]
      formData.sft_accountType = data.label
      formData.sft_accountTypeValue = data.value
      handler('sft_accountType', formData.sft_accountType)
      handler('sft_accountTypeValue', formData.sft_accountTypeValue)
    }
  },
  {
    name: 'sft_accountType2',
    show: false,
    options: [
      {
        label: '对公账户',
        value: '0'
      },
      {
        label: '法人个人储蓄账户',
        value: '1'
      }
    ],
    value: '',
    callback: (e: any) => {
      const data = e[0]
      formData.sft_accountType2 = data.label
      formData.sft_accountType2Value = data.value
      handler('sft_accountType2', formData.sft_accountType2)
      handler('sft_accountType2Value', formData.sft_accountType2Value)
    }
  }
])
const calendars = ref([
  {
    name: 'sft_licenseExpiryDate',
    show: false,
    minDate: `${new Date().getFullYear() - 100}-01-01`,
    maxDate: `${new Date().getFullYear() + 100}-01-01`,
    callback: (e: any) => {
      const { startDate, endDate } = e
      formData.sft_licenseExpiryDate = startDate + '至' + endDate
      handler('sft_licenseExpiryDate', formData.sft_licenseExpiryDate)
    }
  },
  {
    name: 'sft_corporationIdcardExpiryDate',
    show: false,
    minDate: `${new Date().getFullYear() - 100}-01-01`,
    maxDate: `${new Date().getFullYear() + 100}-01-01`,
    callback: (e: any) => {
      const { startDate, endDate } = e
      formData.sft_corporationIdcardExpiryDate = startDate + '至' + endDate
      handler(
        'sft_corporationIdcardExpiryDate',
        formData.sft_corporationIdcardExpiryDate
      )
    }
  },
  {
    name: 'sft_otherPersonIdcardExpiryDate',
    show: false,
    minDate: `${new Date().getFullYear() - 100}-01-01`,
    maxDate: `${new Date().getFullYear() + 100}-01-01`,
    callback: (e: any) => {
      const { startDate, endDate } = e
      formData.sft_otherPersonIdcardExpiryDate = startDate + '至' + endDate
      handler(
        'sft_otherPersonIdcardExpiryDate',
        formData.sft_otherPersonIdcardExpiryDate
      )
    }
  }
])
const current = ref(0)
const change = (index: number) => {
  handler('shopType', index)
}
const agree = ref(false)
const form = ref()
let formData = reactive({
  paymentChannel: '', // 支付入网通道
  accessStatus: '', //
  sft_email: '', // 邮箱
  sft_accessStatus: '', // 盛付通入网状态
  sft_merchantType: '1', // 门店入驻类型
  sft_industryCategory: '', // 行业类别
  sft_registerPhone: '', // 注册手机号
  sft_licenseNo: '', // 营业执照号
  sft_avatar: '', // 商户头像
  sft_shopFrontDeskImg: '', // 门头照片
  sft_shopInsideImg: '', // 门店内照片
  sft_licenseExpiryDate: '', // 营业执照有效期
  sft_corporationName: '', // 法人
  sft_corporationIdcardNo: '', // 法人身份证号
  sft_corporationIdcardAddress: '', // 法人证件地址
  sft_corporationIdcardFrontImage: '', // 身份证人像面
  sft_corporationIdcardBackImage: '', // 身份证国徽面
  sft_corporationIdcardWithHandImage: '', // 手持身份证人像面
  sft_corporationIdcardExpiryDate: '', // 证件有效期
  sft_accountType: '对公账户', // 账户类型
  sft_accountTypeValue: '0', // 账户类型
  sft_accountType2: '法人个人储蓄账户', // 账户类型(个体-其他个人账户)
  sft_accountType2Value: '1', // 账户类型值(个体-其他个人账户)
  sft_accountName: '', // 账户名称
  sft_bankcardFrontImage: '', // 账户名称
  sft_bankcardNo: '', // 银行卡卡号
  sft_bankcardNoRepeat: '', // 银行卡卡号重复
  sft_bankBranch: '', // 银行卡开户行
  sft_accountOpeningCertificate: '', // 银行卡开户行证明
  sft_corporatePersonalAccountName: '', // 法人个人银行账户名称
  sft_corporatePersonalAccountNo: '', // 法人个人银行账户
  sft_corporatePersonalAccountFrontImage: '', // 法人个人银行账户银行卡正面
  sft_corporatePersonalAccountBackImage: '', // 法人个人银行账户银行卡背面
  sft_corporatePersonalAccountBankBranch: '', // 法人个人银行账户开户行
  sft_otherPersonName: '', // 持卡人
  sft_otherPersonIdcardNo: '', // 持卡人身份证号
  sft_otherPersonIdcardFrontImage: '', // 其他个人银行账户银行卡人像面
  sft_otherPersonIdcardBackImage: '', // 其他个人银行账户银行卡人像面
  sft_otherPersonIdcardExpiryDate: '', // 持卡人身份证有效期
  sft_otherPersonIdcardBankBranch: '', // 其他个人银行账户开户行
  sft_otherPersonAccountName: '', // 其他个人银行账户名称
  sft_otherPersonAccountImage: '', // 其他个人银行卡照片
  sft_otherPersonAccountBackImage: '', // 其他个人银行卡背面照片
  sft_otherPersonAccountNo: '', // 其他个人银行账户
  sft_signType: '法人人脸识别签约', // 签约类型
  sft_wxmerchantNumber: '',
  sft_alimerchantNumber: '',
  sftMerchantNumber: '',
  shengpaySubPublicKey: '', // 盛付通商户子公钥
  shengpaySubPrivateKey: '' // 盛付通商户子私钥
})
const IMAGE_NAME = {
  frontImage: '门头照',
  cashImage: '收银台照',
  insideImage: '门店内照片',
  idCardFrontImage: '身份证人像面',
  idCardBackImage: '身份证国徽面',
  idCardFrontImage2: '非法人身份证人像面',
  idCardBackImage2: '非法人身份证国徽面',
  zjsqAgreementImage: '资金授权委托清算',
  bankcardImage: '银行卡正面照',
  bankcardBackImage: '银行卡背面照',
  qfjsAgreementImage: '清分结算授权委托书',
  shrzAgreementImage: '商户入驻协议'
  // shfzAgreementImage: '商户分账服务开通申请登记表',
}
const rules = reactive({
  shopAdress: [
    {
      required: true,
      message: '请填写经营地址',
      trigger: ['change', 'blur']
    }
  ],
  bankcardNo: [
    {
      required: true,
      message: '请填写银行卡卡号',
      trigger: ['change', 'blur']
    }
  ],
  bankBranch: [
    {
      required: true,
      message: '请填写银行卡开户行',
      trigger: ['change', 'blur']
    }
  ],
  bankcardEmail: [
    {
      required: true,
      message: '请填写银行卡邮箱',
      trigger: ['change', 'blur']
    }
  ],
  bankcardPhone: [
    {
      required: true,
      message: '请填写银行卡手机号',
      trigger: ['change', 'blur']
    }
  ],
  rate: [
    {
      required: true,
      message: '请填写让利比例',
      trigger: ['change', 'blur']
    }
  ]
})
const uploadUrl = ref('https://api.yupengt.cn/base/api/v1/ali/sendFile')
const header = reactive({
  Authorization: `Bearer ${
    uni.getStorageSync('accessToken') || getCookie('HYToken') || ''
  }`
})
const tempFormData = reactive({})
const isPreview = ref(false)
const CHECKSTATUS = {
  DEFAULT: 0,
  CHECK_WILL: 1,
  CHECK_ING: 10,
  CHECK_SUCCESS: 20,
  CHECK_FAIL: 21,
  CHECK_DONE: 22
}
const CHECKTIPS = {
  [CHECKSTATUS.DEFAULT]: '',
  [CHECKSTATUS.CHECK_WILL]:
    '待审核，后续相关工作人员可能会联系您，请保持电话畅通！',
  [CHECKSTATUS.CHECK_ING]: '资料审核中，请您耐心等待！',
  [CHECKSTATUS.CHECK_SUCCESS]: '审核同意，资料入网中！',
  [CHECKSTATUS.CHECK_FAIL]:
    '审核拒绝，请您按照相关工作人员的辅助重新提交资料！',
  [CHECKSTATUS.CHECK_DONE]: '入网已完成，您可测试支付！'
}
const tips = ref('')
/**
 * @description: 返回相应状态的tips
 * @param {*} status 审核状态码
 * @return {*} 审核状态tips
 * @author: Kerwin
 */
function getTips(status: any) {
  if (!status) return ''
  return CHECKTIPS[status]
}
function uploadSuccess(data: any, index: any, lists: any, name: string) {
  handler(name, data.data)
}
/**
 * @description: 执行新增或更新
 * @param {*} name 字段名称
 * @param {*} data 字段值数据
 * @return {*}
 * @author: Kerwin
 */
function handler(name: string, data: any) {
  if (isPreview.value) {
    uni.showToast({ icon: 'none', title: '预览模式，不可修改数据！' })
    return
  }
  const id = getIdByName(name)
  const executor = id ? externalUpdate : externalAdd
  let fieldValue = data
  if (formData[name] instanceof Array) {
    if (!tempFormData[name]) {
      tempFormData[name] = []
    }
    tempFormData[name].push(data)
    fieldValue = JSON.stringify(tempFormData[name])
  } else {
    tempFormData[name] = data
  }
  executor({
    id,
    fieldName: name,
    fieldValue: fieldValue
  })
}
function inputBlur(e: any, name: string) {
  handler(name, e)
}
function removeObject(index: any, lists: any, name: string) {
  const type = typeof formData[name]
  if (type === 'string') {
    externalUpdate({
      id: getIdByName(name),
      fieldName: name,
      fieldValue: ''
    })
    formData[name] = ''
    tempFormData[name] = ''
  } else {
    tempFormData[name].splice(index, 1)
    externalUpdate({
      id: getIdByName(name),
      fieldName: name,
      fieldValue: JSON.stringify(tempFormData[name])
    })
  }
}
const shopId = ref('')
async function externalAdd(obj: any) {
  const { data } = await productApi.externalAdd({
    ...obj,
    shopId: shopId.value
  })
  getShopExternals(false)
}
async function externalUpdate(obj: any) {
  const { data } = await productApi.externalUpdate({
    ...obj,
    shopId: shopId.value
  })
}
const shopExternals = ref([])
async function getShopExternals(flag = true) {
  console.log('这是获取商户外部信息')

  if (!shopId.value) return
  uni.showLoading()
  const { data } = await productApi
    .getShopInfo({
      id: shopId.value,
      detail: true
    })
    .finally(() => {
      uni.hideLoading()
    })
  shopExternals.value = data.shopExternals
  if (!flag) return
  getValueByName()
  current.value = Number(formData.shopType)
  isFfrjs.value = formData.jiesuanType === '非法人结算'
  tips.value = getTips(formData.accessStatus)
}
function getIdByName(name: string) {
  if (!name) return
  if (!shopExternals.value) return
  const external = shopExternals.value.find((item) => item.fieldName === name)
  if (external) {
    return external.id
  } else {
    return null
  }
}
function getValueByName() {
  for (let key in formData) {
    const external = shopExternals.value.find((item) => item.fieldName === key)
    if (external) {
      if (typeof formData[key] === 'string') {
        formData[key] = external.fieldValue
        tempFormData[key] = external.fieldValue
      } else {
        formData[key] = JSON.parse(external.fieldValue)
        tempFormData[key] = JSON.parse(external.fieldValue)
      }
    }
  }
}
const protocolTemplates = [
  {
    name: '商户入驻协议',
    url: 'https://image.blacksilverscore.com/App/3667143f-5c74-44c1-8e03-e0ced70371d9.doc'
  },
  {
    name: '清分结算授权委托书',
    url: 'https://image.blacksilverscore.com/App/49045178-8756-438a-a6f7-7d070e255922.docx'
  },
  {
    name: '商户分账服务开通申请登记表',
    url: 'https://image.blacksilverscore.com/App/e229098a-af8a-4bb7-8e81-fbd9170f5bd8.docx'
  },
  {
    name: '非法人清算委托协议',
    url: 'https://image.blacksilverscore.com/App/c6c1de56-3a6e-471a-94d8-94c52a5b70ec.doc'
  }
]
const downloadByUrl = (url: string, filename: string) => {
  if (!url) throw new Error('当前没有下载链接')
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = filename
  // 使用target="_blank"时，添加rel="noopener noreferrer" 堵住钓鱼安全漏洞 防止新页面window指向之前的页面
  a.rel = 'noopener noreferrer'
  document.body.append(a)
  a.click()
  setTimeout(() => {
    a.remove()
  }, 1000)
}
const radioList = [
  {
    name: '法人结算',
    disabled: false
  },
  {
    name: '非法人结算',
    disabled: false
  }
]
const isFfrjs = ref(false)
const radioGroupChange = (e: string, name: string) => {
  isFfrjs.value = e === radioList[1].name
  handler(name, e)
}

/**
 * 获取当前需要检查的必填字段
 */
function getRequiredFields(): string[] {
  const fields: string[] = []

  // 营业执照相关信息（非小微商户）
  if (formData.sft_merchantType != '2') {
    fields.push('sft_licenseNo', 'sft_licenseExpiryDate')
  }

  // 法人/经营者信息
  fields.push('sft_corporationName', 'sft_corporationIdcardNo')

  // 其他个人储蓄账户信息（非小微且选择了其他个人账户）
  if (
    formData.sft_accountTypeValue == '2' &&
    formData.sft_merchantType != '2'
  ) {
    fields.push('sft_otherPersonName', 'sft_otherPersonIdcardNo')
  }

  // 法人个人储蓄账户信息（选择了法人个人账户或小微商户）
  if (
    formData.sft_accountTypeValue == '1' ||
    formData.sft_merchantType == '2'
  ) {
    fields.push(
      'sft_corporatePersonalAccountNo',
      'sft_corporatePersonalAccountBankBranch'
    )
  }

  // 对公账户信息
  if (
    formData.sft_merchantType == '1' ||
    (formData.sft_accountTypeValue != '1' && formData.sft_merchantType == '0')
  ) {
    if (
      formData.sft_merchantType == '1' ||
      (formData.sft_accountType2Value == '0' &&
        formData.sft_merchantType == '0')
    ) {
      fields.push('sft_accountName', 'sft_bankcardNo', 'sft_bankcardNoRepeat')
    }

    if (
      formData.sft_accountType2Value == '1' &&
      formData.sft_merchantType == '0'
    ) {
      fields.push('sft_corporationName')

      fields.push(
        'sft_corporatePersonalAccountNo',
        'sft_corporatePersonalAccountBankBranch'
      )
    }
  }

  return fields
}

/**
 * 检查指定字段是否为空
 */
function checkEmptyFields(fields: string[]): string[] {
  const emptyFields: string[] = []

  fields.forEach((field) => {
    // 特殊处理确认银行账号字段
    if (field === 'sft_bankcardNoRepeat') {
      if (formData[field] !== formData.sft_bankcardNo) {
        emptyFields.push('确认银行账号与银行账号不一致')
      }
      return
    }

    // 检查字段是否为空
    if (
      !formData[field] ||
      (Array.isArray(formData[field]) && formData[field].length === 0) ||
      (typeof formData[field] === 'string' && formData[field].trim() === '')
    ) {
      // 获取字段的显示名称
      const fieldLabel = getFieldLabel(field)
      emptyFields.push(fieldLabel)
    }
  })

  return emptyFields
}

/**
 * 获取字段的显示名称
 */
function getFieldLabel(fieldName: string): string {
  const fieldLabels: Record<string, string> = {
    sft_licenseNo: '营业执照信用代码',
    sft_licenseExpiryDate: '营业执照有效期',
    sft_corporationName: '法人姓名',
    sft_corporationIdcardNo: '法人身份证号',
    sft_corporationIdcardFrontImage: '身份证正面照',
    sft_corporationIdcardBackImage: '身份证反面照',
    sft_corporationIdcardWithHandImage: '手持证件照',
    sft_otherPersonName: '持卡人姓名',
    sft_otherPersonIdcardNo: '持卡人身份证号',
    sft_otherPersonIdcardFrontImage: '持卡人身份证正面照',
    sft_otherPersonIdcardBackImage: '持卡人身份证反面照',
    sft_otherPersonAccountImage: '其他个人银行卡正面照',
    sft_otherPersonAccountNo: '其他个人银行账号',
    sft_corporatePersonalAccountFrontImage: '法人银行卡正面照',
    sft_corporatePersonalAccountNo: '法人银行账号',
    sft_corporatePersonalAccountBankBranch: '法人开户银行',
    sft_accountName: '公司名称',
    sft_bankcardNo: '银行账号',
    sft_bankcardNoRepeat: '确认银行账号',
    sft_bankBranch: '开户银行',
    sft_accountOpeningCertificate: '开户证明'
  }

  return fieldLabels[fieldName] || fieldName
}

function submit() {
  if (!agree.value) {
    uni.showToast({
      icon: 'none',
      title: '请勾选同意资料申报由黑银集团工作人员办理'
    })
    return
  }
  form.value.validate((valid: any) => {
    if (valid) {
      // 检查所有必填项是否已填写
      const requiredFields = getRequiredFields()
      const emptyFields = checkEmptyFields(requiredFields)

      if (emptyFields.length > 0) {
        uni.showToast({
          icon: 'none',
          title: `请填写完整信息: ${emptyFields.join(', ')}`
        })
        return
      }

      const data = { ...formData, ...tempFormData }
      handler('accessStatus', CHECKSTATUS.CHECK_WILL)
      uni.showToast({
        title: '提交成功'
      })
    } else {
      uni.showToast({
        icon: 'none',
        title: '请完善表单信息'
      })
    }
  })
}
const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
const isApp = ref(false)
function toSft() {
  console.log('进入神父同')
  route({
    url: '/packageB/pages/paymentAccess/sft',
    params: {
      shopId: shopId.value
    },
    type: 'navigate',
    callBack: () => {
      console.log('toSft')
    }
  })
}
watch(formData, (newVal, oldVal) => {
  console.log('监听', newVal.paymentChannel)

  if (newVal?.paymentChannel === 'sft') {
    // toSft()
  }
})
async function channelConfirm(arg: any[]) {
  const data = arg[0]
  const callback = arg[1]
  await handler('paymentChannel', data.value)
  callback({ ...data, shopId: shopId.value })
}
onLoad(async (option) => {
  if (option?.shopId) {
    shopId.value = option?.shopId
  } else {
    uni.showModal({
      title: '提示',
      content: '请先提交门店入驻',
      showCancel: false,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          uni.navigateBack()
        }
      }
    })
    return false
  }
  isApp.value = option?.from === 'app' || browserVersion().isHeiyin
  if (isApp.value) {
    // #ifdef H5
    console.log('前端注册回调时机==>', new Date())
    window.JSBridge.registerEvent('HYUserEvent', () => {
      header.Authorization = `Bearer ${getCookie('HYToken') || ''}`
      getShopExternals()
    })
    if (option?.isPreview) {
      isPreview.value = true
    }
    // #endif
  } else {
    getShopExternals()
  }
})
onReady(() => {
  form.value.setRules(rules)
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 60rpx;

  .sft_rw {
    padding: 30rpx;
    color: #2979ff;
    text-align: center;
  }

  .section {
    padding: 30rpx 20rpx;
    margin: 30rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);
    .cq {
      padding-left: 10rpx;
      color: #2979ff;
      font-size: 24rpx;
    }

    &.remark {
      line-height: 46rpx;

      .red {
        color: red;
        margin-bottom: 20rpx;
      }

      .img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
      }
    }

    .title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      font-weight: bold;
    }

    .tips {
      font-size: 20rpx;
      color: red;
    }

    .links {
      font-size: 24rpx;
      color: #2979ff;
    }
  }
}

.protocol {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 50rpx 0 30rpx 0;

  .link {
    color: #6b9eff;
  }
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background-color: rgb(244, 245, 246);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  .des {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    padding: 10rpx;
    font-size: 24rpx;
    color: #fff;
    // height: 50rpx;
    line-height: 30rpx;
  }
}

.uploadBox {
  gap: 16rpx;
  margin-top: 20rpx;
}

.submitBtn {
  margin: 50rpx 0;
  display: block;
}
</style>
